<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery effects</title>
		
		<style type="text/css">
			div.outerPanel {
				/* background-color: #9966CC; */
				background: #cccccc url(./images/backg.png);
				font-family: Monaco;
				width: 550px;
				height: 177px;
				margin: 15% 10% 0px 30%;
			}
			
			div.titlePanel {
				background-color: #99CC66;
				font-family: Monaco;
				font-size: 20px;
				font-stretch: wider;
				font-style: italic;
			}
			
			div.contentPanel {
				background-color: #FFFF66;
				font-family: Monaco;
				font-size: 13px;
			}
		</style>
		
		<script src="scripts/jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var content$ = $("div[class='contentPanel']");
				var title$ = $("div[class^='title']");
				
				$("button[id='hideBtn']").click(function() {
					if( !content$.is(":hidden") ) {
						content$.hide('normal');
					}
				});
				
				$("button[id='showBtn']").click(function() {
					if( content$.is(':hidden')) {
						content$.show('normal', function() {
//							alert("You want to see this!")
							$(this).css({
								color: "#444444",
								fontStyle: "italic",
							});
						});
					} // end of if
				});
				
				$("#fadeInBtn").click(function() {
					if( content$.is(":hidden") ) {
						content$.fadeIn('slow', function() {
							$(this).css({
								color: "#CC6633",
								fontSizs: "15px",
							});
							
							title$.html("Change title now!").css({
								color: "#EE0000",
							});
						});
					} // end of if
				});
				
				$("#fadeOutBtn").click(function() {
					if( !content$.is(":hidden") ) {
						content$.fadeOut('slow', function() {
							$(this).css("backgroundColor", "#0033CC");
							title$.html("This is a title").addClass("div.titlePanel").css("color", "black");
						});
					} //end of if
				});
				
				$("button[id='slideDownBtn']").click(function() {
					if( content$.is(":hidden") ) {
						content$.slideDown('slow', function() {
							$(this).height("auto").append('<br><b name="newText">This is a new text!!!</b>');
							$("div.outerPanel").css("height", "auto");
							$('b[name="newText"]').css({
								fontFamily: 'MV Boli',
								fontSize: "20px",
								color: "#CC9999",
							});
						});
					} // end of if
				});
				
				$("button[id='slideUpBtn']").click(function() {
					if( !content$.is(":hidden") ) {
						content$.slideUp('slow', function() {
							title$.html("Wow, change title again!!!").css({
								fontFamily: 'MV Boli',
								fontSize: "25px",
								color: "#CC9999",
							});
//							$(this).css({
//								height: $(this).height(),
//							});
						});
					} // end of if
				});
				
				$("#undoBtn").click(function() {
//					$("div.titlePanel").html("This is a title").css({
//						backgroundColor: '#99CC66',
//						fontFamily: 'Monaco',
//						fontSize: '20px',
//						fontStretch: 'wider',
//						fontStyle: "italic",
//						color: "black",
//					});
//					
//					$("div.contentPanel").show("normal").css({
//						backgroundColor: "#FFFF66",
//						fontFamily: 'Monaco',
//						fontSize: "13px",
//						fontStyle: "normal",
//						color: "black",
//						height: "147px",
//					});

					$("div.titlePanel").html("This is a title").css({
						backgroundColor: "",
						fontFamily: "",
						fontSize: '',
						fontStretch: '',
						fontStyle: "",
						color: "",
					}).addClass("titlePanel");
					
					$("div.contentPanel").css({
						backgroundColor: "",
						fontFamily: '',
						fontSize: "",
						fontStyle: "",
						color: "",
						height: "",
					}).height("147px").show("normal");
					
//					$("div.outerPanel").css({
//						width: "550px",
//						height: "177px",
//					});

					$("div.outerPanel").css({
						width: "",
						height: "",
					}).addClass("outerPanel");
					
					$("[name='newText']").remove();
					$("br", "div.contentPanel").remove();
				});
				
			}); // end of the anonymous function for ready() method
		</script>
	</head>
	
	<body style="background-color:black">
		<div class="outerPanel">
			<div class="titlePanel">
				This is a title!
			</div>
			<div class="contentPanel">
				Defines an object to provide client request information to a servlet. The servlet container creates a ServletRequest object and passes it as an argument to the servlet's service method.<br />
				A ServletRequest object provides data including parameter name and values, attributes, and an input stream. Interfaces that extend ServletRequest can provide additional protocol-specific data (for example, HTTP data is provided by HttpServletRequest.
			</div>
			
		</div>
		<div style="margin-left:30%">
			<button id="hideBtn">hide</button>&nbsp;
			<button id="showBtn">show</button>&nbsp;
			<button id="fadeInBtn">fadeIn</button>&nbsp;
			<button id="fadeOutBtn">fadeOut</button>&nbsp;
			<button id="slideDownBtn">slideDown</button>&nbsp;
			<button id="slideUpBtn">slideUp</button>
			<button id="undoBtn">確認</button>
		</div>
		
	</body>
</html>
